<template>
    <div class="verify-list">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="姓名">
                <el-input v-model="formInline.userName" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="会员ID">
                <el-input v-model="formInline.ecardId" placeholder="会员ID"></el-input>
            </el-form-item>
            <el-form-item label="验证时间" class="verify-time">
                <el-row>
                    <el-col :span="11" class="time-width">
                        <el-date-picker
                                v-model="formInline.startEntryTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="00:00:00">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="1" class="time-span">~</el-col>
                    <el-col :span="11" class="time-width">
                        <el-date-picker
                                v-model="formInline.endEntryTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="23:59:59">
                        </el-date-picker>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-button type="primary" size="mini" @click="openCheckDialog()">添加手动验证</el-button>
        <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border highlight-current-row size="small">
            <el-table-column label='会员ID' min-width="160" align="left" prop="ecardId"></el-table-column>
            <el-table-column label="姓名" width="180" align="center" prop="userName"></el-table-column>
            <el-table-column label="身份证号" width="300" align="center" prop="idCard"></el-table-column>
            <el-table-column label="有效期" width="180" align="center">
                <template slot-scope="scope">
                    <div>
                        {{scope.row.formatStartDate}}~{{scope.row.formatEndDate}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="价格（元）" width="180" align="center" prop="price"></el-table-column>
            <el-table-column label="验证时间" width="160" align="center" prop="formatEntryTime"></el-table-column>
            <el-table-column label="积分" width="180" align="center" prop="integral"></el-table-column>
        </el-table>
        <el-pagination
                layout="total, prev, pager, next, jumper"
                :total="total"
                :page-size="20"
                :current-page="currentPage"
                @current-change="handleChangePage">
        </el-pagination>

        <el-dialog
            title="手动验证"
            :visible.sync="checkDialog"
            width="720px"
            class="checkDialogForm"
            @close="resetForm()"
            center>
            <div v-show="!hasQuery">
                <el-form ref="checkDialogForm" :model="checkDialogForm" label-width="80px" size="mini">
                    <el-form-item
                      label="身份证号"
                      prop="idCard"
                      :rules="[{ required: true, message: '请输入身份证号', trigger: 'blur'},
                                   { pattern:/^([0-9]{17}[0-9Xx]{1})$/, message: '请输入18位身份证号', trigger: 'blur' }]">
                      <el-input v-model="checkDialogForm.idCard"></el-input>
                    </el-form-item>
                    <el-form-item label="景区名称" v-if="!hasQuery && !queryFail">
                      <el-input v-model="checkDialogForm.name" disabled></el-input>
                    </el-form-item>
                    <span v-if="queryFail" class="span-tip">未查询到相关信息</span>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="queryDetailInfo('checkDialogForm')" size="mini" type="primary" v-if="!queryFail">查询</el-button>
                    <el-button @click="checkDialog = false" size="mini" v-if="queryFail">关闭</el-button>
                </span>
            </div>
            <div v-show="hasQuery && !queryFail">
                <el-form ref="memberForm" :model="memberForm" label-width="130px" size="mini">
                    <el-form-item label="会员卡类型：">
                      {{memberForm.productName}}
                    </el-form-item>
                    <el-form-item label="会员照片：">
                      <img :src="memberForm.userImage" alt=""/>
                    </el-form-item>
                    <el-form-item label="会员身份证图片：">
                      <img :src="memberForm.idImageFront" alt="" class="cardImg"/>
                      <img :src="memberForm.idImageBack" alt="" class="cardImg"/>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="verifyConfirm" size="mini" type="primary">确认验证</el-button>
                    <el-button @click="checkDialog = false" size="mini">取消</el-button>
                </span>
            </div>
        </el-dialog>
    </div>
</template>
<script>
	import { getVerifyList, posVerify, getScenicInfo, queryInfo } from '@/api/sVerifyList'
  import { formatDate } from '@/utils/utils'
  import { Message } from 'element-ui'
	export default {
		data() {
			return {
        queryFail: false,
			  hasQuery: false,
        memberForm: {
          userImage: null,
          productName: null,
          idImageFront: null,
          idImageBack: null
        },
        checkDialogForm: {
          idCard: null,
          name: null
        },
        checkDialog: false,
//        pictureDialogVisible: false,
				list: [],
				listLoading: false,
				formInline: {
					ecardId: '',
					userName: '',
					startEntryTime: '',
					endEntryTime: ''
				},
				total: null,
				currentPage: 1,
				pageSize: 20
			}
		},
		created() {
			this.fetchData()
		},
		methods: {
      verifyConfirm() {
        let params = {
          idCard: this.checkDialogForm.idCard
        }
        posVerify(params).then(res => {
          let data = res.data
          this.listLoading = false
          if (data.errorCode === 'E_000') {
            Message({
              message: data.message,
              type: 'success',
              duration: 2 * 1000
            })
            this.fetchData()
            this.checkDialog = false
          }
        })
      },
      resetForm() {
        this.$refs['checkDialogForm'].resetFields()
        this.$refs['memberForm'].resetFields()
      },
      openCheckDialog() {
        this.hasQuery = false
        this.queryFail = false
        getScenicInfo().then(res => {
          let data = res.data
          this.listLoading = false
          if (data.errorCode === 'E_000') {
            this.checkDialogForm.name = data.body.name
            this.checkDialog = true
          }
        })
      },
      queryDetailInfo(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
//            this.checkDialog = false
            queryInfo(this.checkDialogForm.idCard).then(res => {
              let data = res.data
              this.listLoading = false
              if (data.errorCode === 'E_000') {
                if (data.body.flag) {
                  this.hasQuery = true
                  this.queryFail = false
                  this.memberForm.userImage = data.body.ecardVerifyInfo.userImage
                  this.memberForm.productName = data.body.ecardVerifyInfo.productName
                  this.memberForm.idImageFront = data.body.ecardVerifyInfo.idImageFront
                  this.memberForm.idImageBack = data.body.ecardVerifyInfo.idImageBack
//                  this.pictureDialogVisible = true
                } else {
                  this.hasQuery = false
                  this.queryFail = true
                }
              }
            })
          } else {
            return false
          }
        })
      },
			fetchData() {
				this.listLoading = true
				let formInline = this.formInline
				let params = {
					ecardId: formInline.ecardId,
					userName: formInline.userName,
					startEntryTime: formatDate(formInline.startEntryTime, true),
					endEntryTime: formatDate(formInline.endEntryTime, true),
					pageNumber: this.currentPage,
					pageSize: this.pageSize
				}
				getVerifyList(params).then(res => {
					let data = res.data
					this.listLoading = false
					if (data.errorCode === 'E_000') {
						this.list = data.body.list
						this.total = data.body.total
					}
				}).catch(() => {
					this.listLoading = false
				})
			},
			onSearch() {
				this.fetchData()
			},
			handleChangePage(val) {
				this.currentPage = val
				this.fetchData()
			}
		}
	}
</script>
<style lang="scss">
    .verify-list{
        .span-tip{
          color:#f60;
        }
        .el-dialog__body{
            padding-top: 10px;
        }
        .el-table__header-wrapper{
            overflow: visible;
        }
        .verify-time{
            .el-form-item__content{
                width: 480px;
            }
            .time-width{
                width: 220px;
            }
            .time-span{
                text-align: center;
            }
        }
        .el-table{
            overflow: visible !important;
        }
        .el-table .el-table__body-wrapper {
            overflow: visible;
        }
        .el-table .cell {
            padding: 0 4px;
            overflow: visible;
        }
        .checkDialogForm{
            .el-input{
                .el-input__inner{
                    width: 250px
                }
            }
            img{
              display: inline-block;
              width:200px;
              height:220px;
              border: 1px solid #ccc;
              margin-top: 10px;
            }
            .cardImg{
              width:250px;
              height:180px;
            }
            .dialog-footer{
              display: inline-block;
               width:100%;
              text-align: center;
            }
        }
    }
</style>
